<template>
	<view class="container">
		<!-- 导航栏 -->
		<navView  title="更多物料"></navView>

		<!-- 主内容部分 -->
		<view class="mainContent">
			<!-- 搜索框 -->
			<u-search class="search" placeholder="请输入物料名称" v-model="searchWord" :show-action="false" color="#999999"
				height="60" margin="30rpx" @search="didSearch" @change="searchChange"></u-search>

			<!-- 列表 -->
			<view>
				<view v-for="(item,index) in materialList">
					<materialOrderCell :item="item" @itemClick="itemClick"></materialOrderCell>
				</view>
			</view>
			<u-loadmore :status="loadStatus" :icon-type="loadType" :load-text="loadText" />
		</view>
	</view>
</template>

<script>
	import materialOrderCell from '../../components/materialOrderCell.vue'
	import navView from '../../components/navView.vue'
	export default {
		components: {
			materialOrderCell,
			navView,
		},
		data() {
			return {
				//搜索字段
				searchWord: '',
				//物料列表
				materialList: [],
				//分页-总数量
				total: 0,
				//分页-数据加载状态
				loadStatus: 'loadmore',
				//分页-当前页码
				curPage: 0,
				//分页-每页加载数量
				pageSize: 10,
				loadType: 'flower',
				loadText: {
					loadmore: '轻轻上拉',
					loading: '努力加载中',
					nomore: '实在没有了'
				},
			}
		},
		onLoad() {
			this.rerquesMaterialList(0);
		},
		onReachBottom() {
			//加载更多
			if (this.materialList.length >= this.total) return;
			this.loadStatus = 'loading';
			this.curPage = ++this.curPage;
			this.rerquesMaterialList(this.curPage);
		},
		methods: {
			//请求物料列表
			// currentPage: 请求页码
			rerquesMaterialList(currentPage) {
				let params = {
					materialName: this.searchWord ? this.searchWord : '',
					currentPage: currentPage,
					pageSize: this.pageSize
				}
				this.$u.api.rerquesMaterialList(params).then(res => {
					let data = res;
					if (currentPage == 0) {
						this.materialList = data.list;
						this.total = data.pagination.total;
					} else {
						this.materialList = this.materialList.concat(data.list);
					}
					if (this.materialList.length >= this.total) {
						this.loadStatus = 'nomore';
					} else {
						this.loadStatus = 'loadmore';
					}
				}).catch(err => {
					console.error(err)
				})
			},

			//搜索
			didSearch(searchWord) {
				this.rerquesMaterialList(0);
			},

			//搜索文字变化
			searchChange() {
				if (this.searchWord.length == 0) {
					this.rerquesMaterialList(0);
				}
			},
			
			//cell点击事件
			itemClick(selectedItem) {
				if(selectedItem.date) {
					uni.navigateTo({
						url: './materialOrderDetail?material=' + JSON.stringify(selectedItem),
						success: res => {},
						fail: () => {},
						complete: () => {}
					});
				} 
			},
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		/* background-color: #F5F5F5; */
	}

	.mainContent {
		background-color: #F5F5F5;
		width: 100%;
		height: 100%;
		position: absolute;
	}

	.search {
		border: 1px solid #BFBFBF;
		border-radius: 10px;
	}
</style>
